<template>
  <div class="details-container app-container" v-loading="listLoading">
    <div class="detail-title">
      <div>行业规则：{{ industryName }}<span style="padding-left: 15px; padding-right: 10px;">行业编号：{{ industryId }}</span>
      </div>
      <icon-rule :industryId="industryId"></icon-rule>
    </div>


    <div class="detail-title">
      <div class="filter-container">
        <el-input v-model="listQuery.mid_table_remark_013_in" placeholder="会话ID查询" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />

        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </div>
    </div>
    <div class="page-content">
      <el-table :key="0" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="{row}">
            <span>{{ row.id_public_middle_table }}</span>
          </template>
        </el-table-column>
        <el-table-column label="查询条件" align="center">
          <template slot-scope="{ row }">
            <el-popover placement="left" width="200" trigger="click">
              <div class="popover-box nowrap">
                <div class="cont-item" v-html="row.show_mid_table_remark_001"></div>
              </div>
              <div class="table-cell-overflow" slot="reference">{{ row.show_mid_table_remark_001 | showBRContent }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="查询结果" align="center">
          <template slot-scope="{ row }">

            <el-popover placement="left" width="500" trigger="click">
              <div class="popover-box nowrap">
                <pre class="cont-item" v-html="row.show_mid_table_remark_002"></pre>
              </div>
              <div class="table-cell-overflow" slot="reference">{{ row.show_mid_table_remark_002 | showBRContent }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="会话ID" align="center" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <!-- {{ row.mid_table_remark_009 }} -->
            <el-button type="text" @click="handleChatDetail(row)" :title="row.mid_table_remark_013">{{ row.mid_table_remark_013 }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="标签名称" align="center" :show-overflow-tooltip="true" width="150">
          <template slot-scope="{ row }">
            {{ row.mid_table_remark_015 }}
          </template>
        </el-table-column>
        <el-table-column label="查询时间" align="center" width="160" :resizable="false">
          <template slot-scope="{ row }">
            {{ row.time_insert }}
          </template>
        </el-table-column>
        <el-table-column label="评价等级" align="center" width="110" :resizable="false">
          <template slot-scope="{ row }">
            <!-- {{ row.mid_table_remark_009 }} -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getPageList" />
    <comp-chat-detail-classic ref="refChatDetail" @refresh="onRefresh"></comp-chat-detail-classic>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import Pagination from "@/components/Pagination";

import waves from "@/directive/waves"; // waves directive
import { middleList } from "@/api/middle";
import CompChatDetailClassic from "./components/chat_detail_classic.vue"
import IconRule from "./components/icon_rules.vue";
export default {
  name: "IndustryClassicLog",
  directives: { waves },
  components: {
    Pagination,
    CompChatDetailClassic,
    IconRule
  },
  data() {
    return {
      industryId: "",
      industryName: "",

      listQuery: {
        // type_middle_app: 213001,
        // type_inner_app: 1001,
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
        type_middle_app: 30001,
        type_inner_app: 1001,
        is_online: 0,
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        pre_db_para_order_by_para:  "time_update desc" ,
        pre_db_para_group_by_para: 'mid_table_remark_013',
        mid_table_remark_013_in: ""
      },
      listLoading: false,
      list: [],
      total: 1,
      currentPage: 1,

      listLoading: false,
      courseDetail: {
        id_public_goods_info: "",
        goods_name: "",
        goods_dec: "",
        goods_info_remark_001: "",
        goods_info_remark_002: "",
        goods_info_remark_002_temp: [],
        goods_main_image: "",
        goods_dec_pic: "",
        goods_dec_pic_temp: [],
      },
      id_public_goods_info: "",

      list: [],
      couponTitle: "",
      isRequesting: false,
    };
  },
  filters: {
    showBRContent(val) {
      if (!val) { return val }
      return val.replace(/<br\s*\/?>/g, "\n")
    },
  },
  async mounted() {
    let id = this.$route.query.id;
    let name = decodeURIComponent(this.$route.query.name)
    this.industryId = id;
    this.industryName = name;


    if (id) {
      this.getList();
    } else {
      this.list = [];
      this.handleClose();
    }
  },
  methods: {
    /*
        * 获取页面数据
        * */
    getList() {
      this.listLoading = true;
      let tmp_listQuery = Object.assign({ mid_table_remark_008: this.industryId }, this.listQuery)
      middleList(this.Qs.stringify(tmp_listQuery)).then((response) => {
        let result = response.page_content || [];
        for (let i = 0; i < result.length; i++) {
          let item = result[i];
          item.show_mid_table_remark_001 = item.mid_table_remark_001;
          try {
            if (item.mid_table_remark_001) {
              item.show_mid_table_remark_001 = Base64.decode(item.mid_table_remark_001)
            }
            if (item.mid_table_remark_002) {
              item.show_mid_table_remark_002 = Base64.decode(item.mid_table_remark_002)
            }
          } catch (error) {
          }
        }
        this.list = result;
        this.total = response.result_num;
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    /*
         * 点击分页进行查询
         * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx =
        (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
      this.getList();
    },

    handleClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },

    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0;
      this.getList();
    },
    handleChatDetail(row) {
      this.$refs.refChatDetail.onShowDialog(row, { industryId: this.industryId, industryName: this.industryName })
    },
    onRefresh(){
      this.getList();
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/variables";
@import "../../styles/common.scss";

.detail-title {
  border-bottom: 1px solid #e3e3e3;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  // justify-content: space-between;
  align-items: center;
}

.detail-content {
  padding: 24px 24px 0;

  .el-row {
    margin-bottom: 10px;
  }
}
</style>
